웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요. 오늘은 console 객체에 대하여 알아보려합니다. console(콘솔 객체)가 가장 많이 사용되는 부분은 디버깅(debugging)할 경우가 많은데 이는 간편하게 출력정보를 확인하게 도와주기 때문입니다. console 객체는 몇 가지 유용한 메소드가 존재하며 이중에서도 많이 사용되는 log() 메소드는 특정정보를 인자로 넘겨주면 브라우저의 개발자 메뉴의 console에서 그 내용을 확인할 수가 있습니다.
간단한 예제를 통해 알아보겠습니다. 특정 변수 test의 값이 정상적으로 출력되는지 알아볼 경우 간단하게 사용가능한 방법으로 다음과 같이 사용할 수 있습니다.
하나. alert() 함수를 사용
둘. console.log() 메소드를 사용
alert() 함수 역시 디버깅에 많이 사용되었고 현재도 많이 사용됩니다. 하지만 로깅방식(console.log)이 더 선호되는 이유는 무엇일까요? 일단 정상적인 프로세스를 방해하지 않는다는 점입니다. 이는 가장 큰 부분 중 하나로 alert() 창을 사용할 경우 중간에 멈추는 현상이 발생하게 되나 브라우저의 콘솔은 이와 달리 현재의 프로세스를 계속 유지해줍니다. 또한 반복문이나 기타 확인할 값이 많은 경우에 alert()을 사용할 경우 일일히 엔터를 입력해야 다음으로 진행되기 때문에 많은 불편함이 존재합니다. 이때 console.log()를 사용한 로깅방식은 이런 불편을 줄일 수 있습니다.
이처럼 원하는 위치에 console.log()를 추가해주면 어떤 부분에서 문제가 발생하는지를 확인이 가능합니다. 또한 다수의 console.log()를 사용하고 변수를 함께쓰면 변수의 이상유무와 에러가 발생한 위치를 함께 확인도 가능합니다.
# debugger 명령어 사용하기
추가로 debugging 키워드를 사용해 특정 스크립트를 일시적으로 중단시키는 방법이 있습니다. 방법은 아래 예제처럼 원하는 위치에 해당 debugging 키워드를 입력해 주면 됩니다.
만약 위 코드처럼 if문 직전에 에러가 발생한다면 코드에 debugging을 삽입하여 해당 부분을 디버깅하는 것이 가능합니다.
간단한 예제를 통해 알아보겠습니다. 특정 변수 test의 값이 정상적으로 출력되는지 알아볼 경우 간단하게 사용가능한 방법으로 다음과 같이 사용할 수 있습니다.
하나. alert() 함수를 사용
둘. console.log() 메소드를 사용
# 이 함수가 과거 alert()보다 효과적인 이유는?
alert() 함수 역시 디버깅에 많이 사용되었고 현재도 많이 사용됩니다. 하지만 로깅방식(console.log)이 더 선호되는 이유는 무엇일까요? 일단 정상적인 프로세스를 방해하지 않는다는 점입니다. 이는 가장 큰 부분 중 하나로 alert() 창을 사용할 경우 중간에 멈추는 현상이 발생하게 되나 브라우저의 콘솔은 이와 달리 현재의 프로세스를 계속 유지해줍니다. 또한 반복문이나 기타 확인할 값이 많은 경우에 alert()을 사용할 경우 일일히 엔터를 입력해야 다음으로 진행되기 때문에 많은 불편함이 존재합니다. 이때 console.log()를 사용한 로깅방식은 이런 불편을 줄일 수 있습니다.
# console객체의 log 메소드 예제
<script type="text/javascript">
var test = 'webisfree.com';
.
.
.
console(test);
// 디버깅시 test 변수의 값 console객체로 확인
</script>
var test = 'webisfree.com';
.
.
.
console(test);
// 디버깅시 test 변수의 값 console객체로 확인
</script>
이처럼 원하는 위치에 console.log()를 추가해주면 어떤 부분에서 문제가 발생하는지를 확인이 가능합니다. 또한 다수의 console.log()를 사용하고 변수를 함께쓰면 변수의 이상유무와 에러가 발생한 위치를 함께 확인도 가능합니다.
# debugger 명령어 사용하기
추가로 debugging 키워드를 사용해 특정 스크립트를 일시적으로 중단시키는 방법이 있습니다. 방법은 아래 예제처럼 원하는 위치에 해당 debugging 키워드를 입력해 주면 됩니다.
<script type="text/javascript">
var test = 'webisfree.com';
debugging;
// 위 debugging을 넣어주면 해당 위치에서 일시 정지시킴
if (test == 0) {
...
}
</script>
var test = 'webisfree.com';
debugging;
// 위 debugging을 넣어주면 해당 위치에서 일시 정지시킴
if (test == 0) {
...
}
</script>
만약 위 코드처럼 if문 직전에 에러가 발생한다면 코드에 debugging을 삽입하여 해당 부분을 디버깅하는 것이 가능합니다.
아래의 글도 찾고 계시지 않나요?
